<template>
	<view>
		<dsl-navbar title="服务费报表" isBack bgTopImg="white"></dsl-navbar>
		<view class="serve_message text-white text-center ">
			<view class="padding-top">
				总服务费（元）
			</view>
			<view class="padding-top-sm">
				￥{{serveData.sum}}
			</view>
			<view class="padding-top-xl">
				相比上月增长 {{serveData.sumIncrease}}%
			</view>
			<view class="message_number text-sm ">
				总人数：{{serveData.userCount}}人
			</view>
		</view>

		<view class="padding-lr padding-top-sm bg-white margin radius animation-scale-up  "
			v-for="(item,index) in list":key="index" hover-class="bg-gray "
			 @click.sotp="recruit(item)">
			<view class=" solid-bottom padding-bottom">
				<view class="flex  margin-top">
					<image :src="item.companyLogo" mode="" class="employer_image"></image>
					<view class="margin-left ">
						<view class="align-center ">
							<view class="employer_title  onelineshow text-bold">{{item.companyName }}</view>
							<!-- <view class="employer_fans one_overflow">
							粉丝：3000
						</view> -->
						</view>
						<view class="align-center justify-between" style="width: 510rpx;">
							<view>
								<view class="text-xs text-gray margin-tb-sm">
									本月推荐：{{item.user_count}}人 本月服务费：{{item.serviceM}}
								</view>
								<!-- <view class="text-xs text-gray">
									相比上月增长19%
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	import {
		serviceChart,
		serviceDetail,
		getserviceDetail //这个有用
	} from '../../../common/path.js'
	import EChart from '@/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				firmSalary: {},
				chatData: {},
				list:[],//列表
				serveData: {}, //服务费详情
				chatOpt: {
					xAxis: {
						boundaryGap: 'justify'
					},

					legend: {
						margin: '20',
						position: 'top',
						series: {
							legendShape: 'circle'
						}
					},

				}
			}
		},
		components: {
			EChart
		},
		onLoad(option) {

			this.chatData = {}
			this.serviceDetail() //详情
			this.getserviceDetail(option.status) //服务费详情
		},
		methods: {
			//详情
			recruit(item) {
				var myDate = new Date();
				let d = myDate.getFullYear()
				let m = myDate.getMonth()
				let time = d + '-' + Number(m+1)
				
				uni.navigateTo({
					url: '/pages/enterprise/serviceCharge2'
				})
			},
			
			//服务费详情
			getserviceDetail(status) {
				this.Http.POST(getserviceDetail, {
					status: status
				}).then(res => {
					if (res.code == 1) {
						console.log('[服务费报表]', res);
						this.list = res.data
					}
				})
			},
			//服务费报表
			serviceDetail() {
				let data = {}
				this.Http.POST(serviceDetail, data).then(res => {
					if (res.code == 1) {
						console.log('[详情]', res);
						this.serveData = res.data
					} else {
						setTimeout(r => {
							tools.showToast(res.msg)
						}, 3000)
					}
				})
			}

		},
	}
</script>

<style>
	.serve_message {
		width: 686rpx;
		height: 371rpx;
		background: linear-gradient(343deg, #2294FF 0%, #47AEFF 100%);
		box-shadow: 0px 0px 20rpx rgba(51, 51, 51, 0.16);
		opacity: 1;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.message_number {
		width: 380rpx;
		height: 50rpx;
		background: #0074E1;
		opacity: 1;
		line-height: 50rpx;
		text-align: center;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	page {
		background: #F7F6FA;
	}
	.employer_image {
		width: 80rpx;
		height: 80rpx;
		background: #eeeeee;
		border-radius: 50%;
		opacity: 1;
	}
	
	.employer_title {
		width: 392rpx;
	}
	
	.employer_fans {
		width: 130rpx;
		height: 30rpx;
		border: 1rpx solid #2B9AFF;
		opacity: 1;
		border-radius: 20rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		color: #2B9AFF;
	}
	
	.employer_submit {
		width: 110rpx;
		height: 50rpx;
		background: #E6716D;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
	}
</style>
